﻿<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<title>musicPlayer</title>
<link type="text/css" rel="stylesheet" href="style/music-player.css">
<style type="text/css">
.page-info { padding:8px 15px; background:#fcea9e; border-bottom:1px solid #b6bac0; font:normal 16px Georgia; }
.page-info h1 { float:left; }
.page-info a { font-weight:bold; color:#222; }
.return-article { float:right; }
.return-article h2{ display:inline; }
.main{ padding:20px; height:1000px; color:#444; }
.wrap{ float:right; padding:15px; background:#FFFFE1; border:1px solid paleGoldenrod; border-radius:4px; }
.f-list{ padding:20px 0; line-height:36px; font-size:14px; font-weight:bold; }
.f-list a{ margin:0 5px 0 0; padding:0 10px 0 0; background:url(http://www.feelcss.com/wp-content/themes/fengchao/images/external_link.png) no-repeat scroll right top transparent; color:#006600; text-decoration:none; }
.f-list a:hover{ text-decoration:underline; }
cite{ display:block; }
</style>
</head>
<body>
 
<!--播放器开始 { -->
<div id="musicPlayerWrap" class="m-player-wrap">
  <div id="musicPlayer" class="m-player">
    <div id="musicInfo" class="m-info">
      <img src="images/album.png" alt="" id="albumFrontCover" class="album-front-cover">
      <div class="front-cover-mask" title=""></div>
      <div id="infoWrap" class="info-wrap">
        <dl>
          <dt id="musicName" title="FeelPlayer">FeelPlayer</dt>
          <dd id="musicSinger" title="播放最爱的音乐">播放最爱的音乐</dd>
          <dd id="albumName" title=""></dd>
        </dl>

        <div id="musicFunction" class="m-function clearfix">
          <a href="javascript:void(0);" id="albumLists" class="album-lists" title="打开专辑列表"></a>
          <a href="javascript:void(0);" id="lyrics" class="lyrics" title="打开歌词"></a>
          <!-- <a href="javascript:void(0);" id="favorites" class="favorites" title="打开收藏夹"></a> -->
        </div>
      </div>
    </div>
    <div id="broadcastControl" class="broadcast-control clearfix">
      <div class="broadcast-control-l"></div>
      <div class="broadcast-control-m">
        <a href="javascript:void(0);" id="play" class="m-play" title="播放"></a>
        <a href="javascript:void(0);" id="pause" class="m-pause hidden" title="暂停"></a>
        <a href="javascript:void(0);" id="next" class="m-next" title="下一曲"></a>
        <a href="javascript:void(0);" id="prev" class="m-prev" title="上一曲"></a>

        <div class="play-progress-rate">
          <span id="playTime" class="play-time">0:00</span>
          <div id="progressRateBg" class="progress-rate-bg">
            <div id="progressRateColor" class="progress-rate-color" style="width:0;"></div>
          </div>
          <span id="surplusTime" class="surplus-time">-0:00</span>
        </div>

        <a href="javascript:void(0);" id="nowVolume" class="volume volume-active now-volume"></a>
        <a href="javascript:void(0);" id="nowMute" class="mute mute-active now-volume hidden"></a>
        <a href="javascript:void(0);" id="nowPlayManner" class="now-manner list-cycle list-cycle-active" title="列表循环"></a>

        <div id="volumeControl" class="volume-wrap hidden">
          <a href="javascript:void(0);" id="volume" class="volume" title="点击设为静音"></a>
          <a href="javascript:void(0);" id="mute" class="mute hidden" title="点击开启声音"></a>
          <div id="volumeSizeBg" class="volume-size-bg" title="音量调节">
            <div id="volumeSizeColor" class="volume-size-color" data-volume="" data-height="" style="height:0;"></div>
          </div>
        </div>

        <div id="playMannerControl" class="play-manner-wrap hidden">
          <a href="javascript:void(0);" id="orderPlay" class="order-play" title="顺序播放"></a>
          <a href="javascript:void(0);" id="shufflePlay" class="shuffle-play" title="随机播放"></a>
          <a href="javascript:void(0);" id="singleCycle" class="single-cycle" title="单曲循环"></a>
          <a href="javascript:void(0);" id="listCycle" class="list-cycle" title="列表循环"></a>
        </div>

      </div>
      <div class="broadcast-control-r"></div>
    </div>
  </div>
  <div id="musicPlayerSwitch" class="m-player-switch on" title="打开播放器">
    <a href="javascript:void(0);" id="playerSwitchBtn" class="switch-on"></a>
  </div>

  <div id="lrcWrap" class="lrc-wrap hidden">
    <div id="loadLrc" class="load-lrc hidden">歌曲载入中...</div>
    <div id="lrcBox" class="lrc-box"></div>
  </div>
</div>


<!--播放器结束 } -->
</body>
</html>
<script type="text/javascript" src="javascript/musicPlayer.js"></script>